<template>
   <div class="wrap">
    <span class="close iconfont iconnew iconicon-test"></span>
    <img src="../../assets/logo.png" alt class="logo" />
    <br />
      <div class="box">
        <!-- 传入参数 类型参数type placeholder 错误信息 输入框的正式表达 -->
          <InputDom 
          inputType='text'
          placeHolder="用户名/手机号码"
          rule = '\d{3}'
          err_msg='请正确输入手机号'
          @Valuechange='getusername'
          />
          <InputDom 
          inputType='password'
          placeHolder="密码"
          rule = '\d{3}'
          err_msg='请正确输入密码'
          @Valuechange='getpassword' 
          />
         <ButtonDom inputValue="登录" @clicked='getclick'/><br>
          <a href="#/register" class="register">去注册账号</a>
      </div>
  </div>
</template>

<script>
// 引入input框组件
import InputDom from '../../components/InputDom'
// 引入按钮组件
import ButtonDom from '@/components/ButtonDom'
export default {
  // 配置组件
    components:{
      InputDom,
      ButtonDom
    },
    data(){
      return {
        username:'',
        password:''
      }
    },
    methods:{
      //父组件获取用户名的函数 存入data中
      getusername(username){
        this.username = username
        // console.log(this.username);
      },
     //父组件获取密码的函数 存入data中
      getpassword(password){
        this.password = password
        // console.log(this.password);
      },
      //检测到按钮组件的点击事件
      getclick(){
        // console.log('点击了');
        //发起请求 
        // 登录 
        // 接口类型:【POST】
        // 接口地址: /login
        // 参数 :  username password
         this.$axios({
           method: 'post',
           url:'/login',
           data:{
             username:this.username,
             password:this.password
           }
         })
         .then((res)=>{
          //  console.log(res);
           if(res.status == 200){
             this.$toast.success({
             message:res.data.message
           })
            const id = res.data.data.user.id
            localStorage.setItem('token',res.data.data.token)
            localStorage.setItem('userid',id) 
            this.$router.push({
              path:'/'
            })
           }

         })
      }
    }
}
</script>

<style lang='less' scoped>
.wrap {
  position: relative;
  width: 100%;
  height: 100%;
  .close {
     position: absolute;
     left: 10/360*100vw;
     top: 10/360*100vw;
     font-size: 20/360*100vw;
    
  }

  .logo {
    width: 100/360 * 100vw;
    height: 100/360 * 100vw;
    margin: 100/360 * 100vw 130/360 * 100vw 0;
  }

  .box {
      width: 100%;
      height: 100%;
     
  }
  .register{
      display: block;
      width: 80/360*100vw;
      margin: 0 auto;
      font-size: 14/360*100vw;
      color:red
  }
}
</style>